<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container home">

    <div>

      <el-input  v-model="persistFinish"></el-input>


      <el-row>
        <el-col :span="12">
          <div class="chart-wrapper" ref="sourceTypeAnalysisDiv">
            <pie-chart-rose
              ref="sourceTypeAnalysis"
              :height="height"
              :width="width"
              :opinionSeriesData="sourceTypeAnalysis"
              :saveImage="true"
              @getBase64Image="getBase64Image"
            />
          </div>
        </el-col>

        <el-col :span="12">
          <div class="chart-wrapper" ref="informationEmotionDistribution">
            <pie-chart
              :height="height"
              :width="width"
              :optionSeries="informationEmotionDistribution"
              :optionLegend="informationEmotionDistributionOptionLegend"
              :saveImage="true"
              @getBase64Image="getBase64ImageInformationEmotionDistribution"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="chart-wrapper" ref="mediaSourceDetails">
            <bar-chart
              :height="height"
              :width="width"
              :opinionNew="optionMediaSourceDetails"
              :saveImage="true"
              @getBase64Image="getBase64ImageMediaSourceDetails"
            />
          </div>
        </el-col>

        <el-col :span="12">
          <div class="chart-wrapper" ref="informationTrend">
            <line-chart
              :height="height"
              :width="width"
              :optionNew="optionInformationTrend"
              :saveImage="true"
              @getBase64Image="getBase64ImageInformationTrend"
            />
          </div>
        </el-col>
      </el-row>



      <el-row>


        <el-col :span="12">
          <div class="chart-wrapper" ref="carrierEmotionAnalysis">
            <bar-chart-data-set
              :height="height"
              :width="width"
              :optionTitleText="optionTitleTextMediaTypeEmotion"
              :opinionDatasetDimensions="opinionDatasetDimensionsMediaTypeEmotion"
              :opinionDatasetSource="opinionDatasetSourceMediaTypeEmotion"
              :saveImage="true"
              @getBase64Image="getBase64ImageCarrierEmotionAnalysis"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="chart-wrapper" ref="hotWords">
            <word-cloud :hots="hotWords"
                        :height="height"
                        :width="width"
                        :optionTitleText="optionTitleTextHotWords"
                        :saveImage="true"
                        @getBase64Image="getBase64ImageHotWords"
            />
          </div>
        </el-col>

        <el-col :span="12">

          <div class="chart-wrapper" ref="mediaCommunicationAnalysis">
            <media-name-trend
              :height="height"
              :eventId="eventId"
            >
            </media-name-trend>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="chart-wrapper" ref="emotionalAnalysis">
            <line-chart :height="height"
                        :width="width"
                        :optionNew="optionEmotional"
                        :saveImage="true"
                        @getBase64Image="getBase64ImageEmotionalAnalysis"

            />
          </div>
        </el-col>

        <el-col :span="12">
          <div class="chart-wrapper" ref="informationCarrierTrends">
            <line-chart :height="height"
                        :width="width"
                        :optionNew="optionMediaType"
                        :saveImage="true"
                        @getBase64Image="getBase64ImageInformationCarrierTrends"

            />
          </div>
        </el-col>
      </el-row>




    </div>


  </div>
</template>

<script>
  import {getEventEchartsAnonymous} from "@/api/system/opinion";
  import {postImages} from "@/api/system/event";
  import LineChart from '@/components/Echarts/Generate/LineChart'
  import HeatMap from '@/components/Echarts/HeatMap'
  import LineChartStyle from '@/components/Echarts/LineChartStyle'
  import WordCloud from '@/components/Echarts/WordCloud'
  import BarChartDataSet from '@/components/Echarts/BarChartDataSet'
  import GraphForceLayout from '@/components/Echarts/GraphForceLayout'
  import GraphCircularLayout from '@/components/Echarts/GraphCircularLayout'
  import GraphNoneLayout from '@/components/Echarts/GraphNoneLayout'
  import PieChartRose from '@/components/Echarts/PieChartRose'
  import PieChart from '@/components/Echarts/PieChart'
  import BarChart from '@/components/Echarts/Generate/BarChart'
  import LineChartDemoBase from '@/components/Echarts/LineChartDemoBase'


  export default {
    data() {
      return {
        mapImages: {},
        persistFinish: null,
        selectEmotion: '',
        showSelectData: false,

        opinionDatasetDimensionsMediaTypeEmotion: [],
        opinionDatasetSourceMediaTypeEmotion: [],
        optionTitleTextMediaTypeEmotion: '',

        optionTitleTextHotWords: "热词云图",
        hotWords: [{name: "暂无数据", value: 1}],

        startingMedia: [],

        optionSeriesEmotional: [],
        optionXAxisDataEmotional: [],
        optionLegendEmotional: [],
        optionTitleTextEmotional: '',
        optionEmotional: {},

        optionSeriesMediaType: [],
        optionXAxisDataMediaType: [],
        optionLegendMediaType: [],
        optionTitleTextMediaType: '',
        optionMediaType: {},

        optionSeriesInformationTrend: [],
        optionXAxisDataInformationTrend: [],
        optionLegendInformationTrend: [],
        optionTitleTextInformationTrend: '',
        optionInformationTrend: {},

        height: "476px",
        width: "866px",
        eventId: 0,
        persistId: '',
        sourceTypeAnalysis: [],
        informationEmotionDistribution: [],
        informationEmotionDistributionOptionLegend: [],

        optionTitleTextMediaSourceDetails: '',
        optionSeriesMediaSourceDetails: [],
        optionXAxisDataMediaSourceDetails: [],
        optionMediaSourceDetails: {},
        completeCount: 0,
      }
    },


    components: {
      LineChart,
      HeatMap,
      LineChartStyle,
      WordCloud,
      BarChartDataSet,
      GraphForceLayout,
      GraphNoneLayout,
      GraphCircularLayout,
      PieChartRose,
      PieChart,
      BarChart,
      LineChartDemoBase
    },
    created() {
      this.eventId = this.$route.query.eventId
      this.persistId = this.$route.query.persistId
      this.getEventEcharts()
    },
    mounted() {

    },
    watch: {},

    methods: {
      checkImage(){
        if(Object.keys(this.mapImages).length>8){
            this.toImage()
        }
      },
      getBase64Image(val) {
        this.mapImages.sourceTypeAnalysis= val
        this.checkImage()
      },
      getBase64ImageHotWords(val) {
        this.mapImages.hotWords=val
        this.checkImage()
      },
      getBase64ImageInformationEmotionDistribution(val) {
        this.mapImages.informationEmotionDistribution=val
        this.checkImage()
      },
      getBase64ImageMediaSourceDetails(val) {
        this.mapImages.mediaSourceDetails=val
        this.checkImage()
      },
      getBase64ImageInformationTrend(val) {
        this.mapImages.informationTrend=val
        this.checkImage()
      },
      getBase64ImageCarrierEmotionAnalysis(val) {
        this.mapImages.carrierEmotionAnalysis=val
        this.checkImage()
      },
      getBase64ImageMediaCommunicationAnalysis(val) {
        this.mapImages.mediaCommunicationAnalysis=val
        this.checkImage()
      },
      getBase64ImageEmotionalAnalysis(val) {
        this.mapImages.emotionalAnalysis=val
        this.checkImage()
      },
      getBase64ImageInformationCarrierTrends(val) {
        this.mapImages.informationCarrierTrends=val
        this.checkImage()
      },

      postImages(obj) {
        postImages(obj).then(response => {
          this.persistFinish = 'success'
        });

      },
      toImage() {
        this.postImages({
          persistId: this.persistId,
          data: this.mapImages
        })

      },
      getEventEcharts() {
        let param = {
          eventId: this.eventId,
        };
        getEventEchartsAnonymous(param).then(response => {
          // ****************************************************************************************
          //来源类型分析
          this.sourceTypeAnalysis = response.data.sourceTypeAnalysis
          //渲染玫瑰图
          this.$refs.sourceTypeAnalysis.initChart();

          // ****************************************************************************************
          //信息趋势图
          let name = '舆情数量'
          this.optionTitleTextInformationTrend = ""
          this.optionLegendInformationTrend = [name]
          let informationTrend = response.data.informationTrend
          this.optionXAxisDataInformationTrend = response.data.dateList
          this.optionSeriesInformationTrend = [];

          let data = []
          this.optionXAxisDataInformationTrend.forEach(day => {
            let filter = informationTrend.filter(item => (item.name === day))
            if (filter.length === 1) {
              filter.forEach((item) => {
                data.push(item.value)
              })
            } else {
              data.push(0)
            }
          })
          let serie = {
            name: name,
            label: {
              show: true,
              position: 'top'
            },
            type: 'line',
            stack: "数量",
            data: data,
            smooth: true
          }
          this.optionSeriesInformationTrend.push(serie)

          this.optionInformationTrend = {
            title: {
              text: this.optionTitleTextInformationTrend,
            },
            backgroundColor: '#fff',
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            dataZoom: [
              {
                type: 'slider',
                show: true
              }
            ],
            legend: {
              data: this.optionLegendInformationTrend
            },
            grid: {
              top: 10,
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: this.optionXAxisDataInformationTrend,
              axisTick: {
                alignWithLabel: true
              }
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: false
              }
            }],
            series: this.optionSeriesInformationTrend
          }


          // ****************************************************************************************
          //信息情感分布
          let informations = response.data.informationEmotionDistribution
          let informationDatas = []
          Object.keys(informations).forEach(key => {
            if (key == "positive") {
              let obj = {
                name: "正面",
                value: informations[key]
              }
              informationDatas.push(obj);
              this.informationEmotionDistributionOptionLegend.push("正面")
            } else if (key == "negative") {
              let obj = {
                name: "负面",
                value: informations[key]
              }
              informationDatas.push(obj);
              this.informationEmotionDistributionOptionLegend.push("负面")
            } else if (key == "neutral") {
              let obj = {
                name: "中性",
                value: informations[key]
              }
              informationDatas.push(obj);
              this.informationEmotionDistributionOptionLegend.push("中性")
            }
          })
          this.informationEmotionDistribution = [
            {
              name: '舆情数',
              type: 'pie',
              radius: '50%',
              data: informationDatas,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]


          // ****************************************************************************************
          //媒体来源明细
          var mediaSourceDetails = response.data.mediaSourceDetails
          this.optionTitleTextMediaSourceDetails = ''
          this.optionSeriesMediaSourceDetails = []
          this.optionXAxisDataMediaSourceDetails = []
          let objData = []
          mediaSourceDetails.forEach(item => {
            this.optionXAxisDataMediaSourceDetails.push(item.name)
            objData.push(item.value)
          })
          let obj = {
            data: objData,
            type: 'bar',
            barMaxWidth: 50,//最大宽度
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
          this.optionSeriesMediaSourceDetails.push(obj)
          this.optionMediaSourceDetails = {
            title: {
              text: this.optionTitleTextMediaSourceDetails,
            },
            backgroundColor: '#fff',
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              top: 10,
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              data: this.optionXAxisDataMediaSourceDetails,
              axisTick: {
                alignWithLabel: true
              }
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: false
              }
            }],
            series: this.optionSeriesMediaSourceDetails
          }

// ****************************************************************************************
          //正负面信息趋势图
          var emotionalTrend = response.data.emotionalTrend
          this.optionTitleTextEmotional = "正负面信息趋势图"
          this.optionLegendEmotional = ["正面", "中性", "负面"]
          emotionalTrend.forEach(item=>{
            this.optionXAxisDataEmotional.push(item.name)
          })
          this.optionSeriesEmotional = [];
          this.optionLegendEmotional.forEach(sensitiveType => {
            let data = []
            this.optionXAxisDataEmotional.forEach(day => {
              let count=0;
              let filter = emotionalTrend.filter(item => (item.name === day ))
              if (filter.length === 1) {
                filter.forEach((item) => {
                  item.value.forEach(value=>{
                    if(sensitiveType===value.name){
                      count=value.value
                    }
                  })
                })
              }
              data.push(count)
            })
            let serie = {
              name: sensitiveType,
              type: 'line',
              stack: "Total",
              data: data,
              smooth: true
            }
            this.optionSeriesEmotional.push(serie)
          })


          this.optionEmotional = {
            title: {
              text: this.optionTitleTextEmotional,
            },
            backgroundColor: '#fff',
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            dataZoom: [
              {
                type: 'slider',
                show: true
              }
            ],
            legend: {
              data: this.optionLegendEmotional
            },
            grid: {
              top: 10,
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: this.optionXAxisDataEmotional,
              axisTick: {
                alignWithLabel: true
              }
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: false
              }
            }],
            series: this.optionSeriesEmotional
          }

// ****************************************************************************************
          //信息载体趋势图
          var mediaCount = response.data.mediaCount
          this.optionTitleTextMediaType = "信息载体趋势图"
          this.optionLegendMediaType = response.data.mediaTypeList
          this.optionXAxisDataMediaType = response.data.dateList
          this.optionSeriesMediaType = [];
          this.optionLegendMediaType.forEach(mediaType => {
            let data = []
            this.optionXAxisDataMediaType.forEach(day => {
              let count=0;
              let filter = mediaCount.filter(item => (item.name === day))
              if (filter.length === 1) {
                filter.forEach((item) => {
                  item.value.forEach(value=>{
                    if(mediaType===value.name){
                      count=value.value
                    }
                  })
                })
              }
              data.push(count)
            })
            let serie = {
              label: {
                show: true,
                position: 'top'
              },
              name: mediaType,
              type: 'line',
              stack: "数量",
              data: data,
              smooth: true
            }
            this.optionSeriesMediaType.push(serie)
          })

          this.optionMediaType = {
            title: {
              text: this.optionTitleTextMediaType,
            },
            backgroundColor: '#fff',
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            dataZoom: [
              {
                type: 'slider',
                show: true
              }
            ],
            legend: {
              data: this.optionLegendMediaType
            },
            grid: {
              top: 10,
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: this.optionXAxisDataMediaType,
              axisTick: {
                alignWithLabel: true
              }
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: false
              }
            }],
            series: this.optionSeriesMediaType
          }



// ****************************************************************************************
          this.startingMedia = response.data.startingMedia
//****************************************************************
          if (response.data.hotWords != undefined && response.data.hotWords.length > 0) {
            this.hotWords = response.data.hotWords;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
//****************************************************************
          let mediaTypeSensitive = response.data.mediaTypeSensitive
          this.opinionDatasetDimensionsMediaTypeEmotion = ["媒体类型", "正面", "负面", "中性"]
          mediaTypeSensitive.forEach(m => {
            let count1=0
            m.value.forEach(v=>{
              if(v.name=='正面'){
                count1=v.value
              }
            })
            let count2=0
            m.value.forEach(v=>{
              if(v.name=='中性'){
                count2=v.value
              }
            })

            let count3=0
            m.value.forEach(v=>{
              if(v.name=='负面'){
                count3=v.value
              }
            })
            this.opinionDatasetSourceMediaTypeEmotion.push([m.name, count1,count3, count2])
          })
          this.optionTitleTextMediaTypeEmotion = '载体情感分析图'



        })

      },


    }
  }
</script>

<style scoped lang="scss">
  .home {
    background-color: #eeeeee;

  }

  .chart-wrapper {
    margin-top: 20px;
    width: 100%;
    height: 476px;
    margin-bottom: 0px;
  }


</style>
